<template>
    <view>
        <Tabs :tabs111="tabs" @tabsItemChange="handleTabsItemChange">
            <view class="collect_main">
                <view class="collect_title">
                    <text class="collect_tips active">全部</text>
                    <text class="collect_tips">正在热卖</text>
                    <text class="collect_tips">即将上线</text>
                </view>
                <view class="collect_content">
                    <block v-if="collect.length !== 0">
                        <navigator class="cart_item" :url="'/pages/goods_detail/main?goods_id=' + item.goods_id" v-for="(item, index) in collect" :key="item.goods_id">
                            <view class="cart_img_wrap">
                                <image class="" :src="item.goods_small_logo" mode="widthFix"></image>
                            </view>

                            <view class="cart_info_wrap">
                                <view class="goods_name">{{ item.goods_name }}</view>
                                <view class="goods_price_wrap">
                                    <view class="goods_price">{{ item.goods_price }}</view>
                                </view>
                            </view>
                        </navigator>
                    </block>
                    <block v-else>
                        <image src="http://hbimg.b0.upaiyun.com/e1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658" mode="widthFix"></image>
                    </block>
                </view>
            </view>
        </Tabs>
    </view>
</template>

<script>
import Tabs from '../../components/Tabs/Tabs';
// pages/collect/index.js
export default {
    components: {
        Tabs
    },
    data() {
        return {
            collect: [],
            tabs: [
                {
                    id: 0,
                    value: '商品收藏',
                    isActive: true
                },
                {
                    id: 1,
                    value: '品牌收藏',
                    isActive: false
                },
                {
                    id: 2,
                    value: '店铺收藏',
                    isActive: false
                },
                {
                    id: 3,
                    value: '浏览足迹',
                    isActive: false
                }
            ]
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        const collect = uni.getStorageSync('collect') || [];
        console.log(collect);
        this.setData({
            collect
        });
        console.log(this.collect);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        /**
         * 标题的点击事件 从子组件传递过来的
         */
        handleTabsItemChange(e) {
            console.log(e);
            const index = e.detail;
            let tabs = JSON.parse(JSON.stringify(this.tabs));
            tabs.forEach((item, index_tabs) => {
                if (index_tabs === index) {
                    item.isActive = true;
                } else {
                    item.isActive = false;
                }
            }); // 重新赋值

            this.setData({
                tabs
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
